<template>
    <div>
      <template>
        <el-table
          :data="ordersDetailsData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            label="图片"
            width="150">
            <template slot-scope="scope">
              <el-avatar shape="square" :size="100" :src="scope.row.gdimage"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="gdname"
            label="菜名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="gdprice"
            label="单价"
            width="150">
          </el-table-column>
          <el-table-column
            prop="onumber"
            label="数量"
            width="150">
          </el-table-column>
          <el-table-column
            label="小计"
            width="150">
            <template slot-scope="scope">
              {{scope.row.gdprice * scope.row.onumber}}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
      name: "OrdersDetails",
      data() {
        return {
          oname: '',
          ordersDetailsData: [
            {
              gdimage:'',
              gdname: '',
              gdprice: '',
              onumber: ''
            }
          ]
        }
      },
      methods:{
        getOrdersDetailsData(){
          var _this = this;
          axios.get(`/api/orderDetails/getOrdersDetailsData/${_this.oname}`).then(function (res) {
              _this.ordersDetailsData = res.data
          })
        }
      },
      mounted() {
        this.oname = this.$route.params.oname;
        this.getOrdersDetailsData()
      }
    }
</script>

<style scoped>

</style>
